<template>
  <div
    :class="[
      'own--drawer',
      {
        active: visible,
        small: small,
        expand: isUp,
        collapse: !isUp,
        thyroid: posE == 'thyroid',
        liver: posE == 'liver',
        artery: posE == 'artery',
        urinary: posE == 'urinary',
        imgSmall:imgSmall
      },
    ]"
  >
    <div class="own--drawer--head">
      <div class="own--drawer--head--title">{{ title }}</div>
      <!--      <div class="own&#45;&#45;drawer&#45;&#45;head&#45;&#45;cloese" @click="handleClose">-->
      <!--        <a-icon-->
      <!--          type="close-circle"-->
      <!--          :style="{ fontSize: '25px', color: '#fff' }"-->
      <!--        />-->
      <!--      </div>-->
      <div class="own--drawer--head--cloese" @click="handleUp">
        <a-icon
          type="up"
          :style="{ fontSize: '25px', color: '#fff' }"
          v-show="isUp"
        />
        <a-icon
          type="down"
          :style="{ fontSize: '25px', color: '#fff' }"
          v-show="!isUp"
        />
      </div>
    </div>
    <div class="own--drawer--con">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "OwnDrawer",
  props: ["visible", "title", "small", "pos","imgSmall"],
  data() {
    return {
      isUp: true,
      posInfo: {
        甲状腺: "thyroid",
        腹部: "liver",
        颈动脉: "artery",
        泌尿: "urinary",
      },
    };
  },
  computed: {
    posE() {
      return this.posInfo[this.pos];
    },
  },
  methods: {
    handleClose() {
      this.$emit("on-close");
    },
    handleUp() {
      this.isUp = !this.isUp;
    },
  },
};
</script>

<style scoped lang="less">
.own--drawer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -110%;
  background-color: rgba(31, 31, 31, 0.9);
  z-index:1010;
  transition: all 0.2s linear;
  overflow: hidden;
  &.active {
    animation: scale-up-hor-left 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }
  &.small {
    width: 60%;
    &.artery {
      width: 75%;
    }
    &.thyroid {
      width: 85%;
    }
    &.liver {
      width: 75%;
    }
    &.urinary {
      width: 75%;
    }
  }
  &.imgSmall{
    width: 60%;
  }
  &.expand {
    height: 100%;
    transition: height 0.3s ease-in;
  }
  &.collapse {
    height: 64px;
    transition: height 0.3s ease-out;
  }
  .own--drawer--head {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    .own--drawer--head--title {
      font-size: 30px;
      font-weight: bold;
      color: #fff;
    }
    .own--drawer--head--cloese {
      cursor: pointer;
      padding: 0 30px;
    }
  }
  .own--drawer--con {
    width: 100%;
    height: calc(100% - 64px);
  }
}
@keyframes scale-up-hor-left-in {
  0% {
    transform-origin: 0% 0%;
    left: 0;
    opacity: 0;
  }
  100% {
    transform-origin: 0% 0%;
    left: -110%;
    opacity: 1;
  }
}
@keyframes scale-up-hor-left {
  0% {
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: 0% 0%;
    left: -110%;
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: 0% 0%;
    left: 0;
  }
}
</style>
